<template>

  <el-card class="box-card">
    <div slot="header">
      <span>{{$route.query.id? '试题修改': '试题录入'}}</span>
    </div>
    <div>
      <!-- 学科 -->
      <el-form
        ref="formList"
        :model="formdata"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item
          label="学科:"
          prop="subjectID"
        >
          <el-select
            @focus="simple"
            placeholder="请选择"
            v-model="formdata.subjectID"
            style="width:450px; padding-left:10px"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item
          label="目录:"
          prop="catalogID"
        >
          <el-select
            v-model="formdata.catalogID"
            @focus="directorysList"
            style="width:450px; padding-left:10px"
          >
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item
          label="企业:"
          prop="enterpriseID"
        >
          <el-select
            @focus="List"
            v-model="formdata.enterpriseID"
            style="width:450px; padding-left:10px"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :value="item.id"
              :label="item.shortName"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item
          label="城市:"
          prop="province"
        >
          <el-select
            style="padding-left:10px"
            v-model="formdata.province"
            @change="handleChange"
          >
            <el-option
              v-for="item in citySelect.province"
              :key="item.id"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
          <el-select
            style="padding-left:10px"
            v-model="formdata.city"
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item.id"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item
          label="方向:"
          prop="direction"
        >
          <el-select
            v-model="formdata.direction"
            style="width:450px; padding-left:10px"
          >
            <el-option
              v-for="item in directionList"
              :key="item.index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item
          label="题型:"
          prop="questionType"
        >
          <el-radio-group
            v-model="formdata.questionType"
            @change="changeType"
          >
            <el-radio
              style=" padding-left:10px"
              label="1"
            >单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item
          label="难度:"
          prop="difficulty"
        >
          <el-radio-group
            v-model="formdata.difficulty"
            @change="changeDifficulty"
          >
            <el-radio
              style=" padding-left:10px"
              label="1"
            >简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item
          label="题干:"
          prop="question"
        >

          <editor
            ref="editorOne"
            v-model="Detail"
            @change="change"
          ></editor>

        </el-form-item>
        <!-- 选项单选 -->
        <el-form-item
          v-if="questionType==1"
          label="选项："
        >
          <!-- 选项 -->
          <el-radio-group
            @change="singleOption"
            v-model="formdata.options.code"
          >
            <!-- 选项 A-->
            <el-form-item>
              <el-radio label="A">A:
                <el-input
                  v-model="formdata.options.title.title1"
                  autocomplete="off"
                  :disabled="A"
                  placeholder="请输入选项内容"
                  style="width:85%;"
                ></el-input>
                <el-upload
                  class="upload-demo"
                  name="image"
                  action="#"
                  style="display: inline"
                >
                  <el-button
                    plain
                    class="btn"
                  >上传图片
                    <i class="el-icon-circle-close i"></i>
                  </el-button>
                </el-upload>
              </el-radio>
            </el-form-item>
            <!-- 选项 B-->
            <el-form-item>
              <el-radio label="B">B:
                <el-input
                  v-model="formdata.options.title.title2"
                  autocomplete="off"
                  :disabled="B"
                  placeholder="请输入选项内容"
                  style="width:85%;"
                ></el-input>
                <el-upload
                  class="upload-demo"
                  name="image"
                  action="#"
                  style="display: inline"
                >
                  <el-button
                    plain
                    class="btn"
                  >上传图片
                    <i class="el-icon-circle-close i"></i>
                  </el-button>
                </el-upload>
              </el-radio>
            </el-form-item>
            <!-- 选项 C-->
            <el-form-item>
              <el-radio label="C">C:
                <el-input
                  v-model="formdata.options.title.title3"
                  :disabled="C"
                  placeholder="请输入选项内容"
                  style="width:85%;"
                ></el-input>
                <el-upload
                  class="upload-demo"
                  name="image"
                  action="#"
                  style="display: inline"
                >
                  <el-button
                    plain
                    class="btn"
                  >上传图片
                    <i class="el-icon-circle-close i"></i>
                  </el-button>
                </el-upload>
              </el-radio>
            </el-form-item>
            <!-- 选项 D-->
            <el-form-item>
              <el-radio label="D">D:
                <el-input
                  v-model="formdata.options.title.title4"
                  :disabled="D"
                  placeholder="请输入选项内容"
                  style="width:85%;"
                ></el-input>
                <el-upload
                  class="upload-demo"
                  name="image"
                  action="#"
                  style="display: inline"
                >
                  <el-button
                    plain
                    class="btn"
                  >上传图片
                    <i class="el-icon-circle-close i"></i>
                  </el-button>
                </el-upload>
              </el-radio>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                disabled
              >+增加选项与答案</el-button>
            </el-form-item>
          </el-radio-group>
        </el-form-item>
        <!-- 多选 -->
        <el-form-item v-if="questionType==2">
          <!-- 选项 A-->
          <el-form-item>
            <el-checkbox
              label="A"
              v-model="formdata.options.code.code1"
              true-label="A"
              false-label=""
            >A:
              <el-input
                v-model="formdata.options.title.title1"
                placeholder="请输入选项内容"
                style="width:400px"
              ></el-input>
              <el-upload
                class="upload-demo"
                name="image"
                action="#"
                style="display: inline"
              >
                <el-button
                  plain
                  class="btn"
                >上传图片
                  <i class="el-icon-circle-close i"></i>
                </el-button>
              </el-upload>
            </el-checkbox>
          </el-form-item>
          <!-- 选项 B-->
          <el-form-item>
            <el-checkbox
              label="B"
              v-model="formdata.options.code.code2"
              true-label="B"
              false-label=""
            >B:
              <el-input
                v-model="formdata.options.title.title2"
                placeholder="请输入选项内容"
                style="width:85%;"
              ></el-input>
              <el-upload
                class="upload-demo"
                name="image"
                action="#"
                style="display: inline"
              >
                <el-button
                  plain
                  class="btn"
                >上传图片
                  <i class="el-icon-circle-close i"></i>
                </el-button>
              </el-upload>
            </el-checkbox>
          </el-form-item>
          <!-- 选项 C-->
          <el-form-item>
            <el-checkbox
              label="C"
              v-model="formdata.options.code.code3"
              true-label="C"
              false-label=""
            >C:
              <el-input
                v-model="formdata.options.title.title3"
                placeholder="请输入选项内容"
                style="width:85%;"
              ></el-input>
              <el-upload
                class="upload-demo"
                name="image"
                action="#"
                style="display: inline"
              >
                <el-button
                  plain
                  class="btn"
                >上传图片
                  <i class="el-icon-circle-close i"></i>
                </el-button>
              </el-upload>
            </el-checkbox>
          </el-form-item>
          <!-- 选项 D-->
          <el-form-item>
            <el-checkbox
              label="D"
              v-model="formdata.options.code.code4"
              true-label="D"
              false-label=""
            >D:
              <el-input
                v-model="formdata.options.title.title4"
                placeholder="请输入选项内容"
                style="width:85%;"
              ></el-input>
              <el-upload
                class="upload-demo"
                name="image"
                action="#"
                style="display: inline"
              >
                <el-button
                  plain
                  class="btn"
                >上传图片
                  <i class="el-icon-circle-close i"></i>
                </el-button>
              </el-upload>
            </el-checkbox>
          </el-form-item>
          <!-- 添加的多选 -->
          <el-form-item
            v-for="(i,index) in addlist"
            :key="index"
          >
            <el-checkbox>{{addlist[index].label}}:
              <el-input
                placeholder="请输入选项内容"
                style="width:85%;"
              ></el-input>
              <el-upload
                class="upload-demo"
                name="image"
                action="#"
                style="display: inline"
              >
                <el-button
                  plain
                  class="btn"
                >上传图片
                  <i class="el-icon-circle-close i"></i>
                </el-button>
              </el-upload>
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              @click="add"
            >+增加选项与答案</el-button>
          </el-form-item>
        </el-form-item>
        <!-- 视频解析 -->
        <!-- 解析视频 -->
        <el-form-item label="解析视频:">
          <el-input
            v-model="formdata.videoURL"
            style="width:450px; padding-left:10px"
          />
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item
          label="答案解析:"
          prop="answer"
        >
          <template>
            <div>
              <editor
                ref="editorOne"
                v-model="detail"
                @change="change"
              ></editor>
            </div>
          </template>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注:">
          <el-input
            v-model="formdata.remarks"
            type="textarea"
            :rows="5"
            style="width:450px; padding-left:10px"
          />
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签:">
          <el-select
            multiple
            filterable
            allow-create
            default-first-option
            @focus="tagsSimple"
            v-model="formdata.tags"
            style="width:450px; padding-left:10px"
          >
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >

            </el-option>
          </el-select>
        </el-form-item>
        <el-row
          type="flex"
          justify="start"
        >
          <el-col
            :span="6"
            style="padding-left:140px"
          >
            <el-button
              type="primary"
              @click="btnOK"
            >{{$route.query.id? '试题修改': '试题录入'}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import Editor from '../components/wangeditor.vue'
// 学科api 引入
import { simple } from '@/api/hmmm/subjects.js'
// 企业api 引入
import { list } from '@/api/hmmm/companys.js'
// 目录api 引入
import { list as directorysList } from '@/api/hmmm/directorys.js'
// 引入城市
import { provinces, citys } from '@/api/hmmm/citys'
// 引入方向数组
import { direction } from '@/api/hmmm/constants.js'
// 试题导入 api
import { add, detail, update } from '@/api/hmmm/questions.js'
// 标签api 引入
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
export default {
  name: 'questionsNew',
  components: {
    Editor
  },
  data () {
    return {
      formdata: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: {
          code: {
            code1: '',
            code2: '',
            code3: '',
            code4: ''
          },
          title: {
            title1: '',
            title2: '',
            title3: '',
            title4: ''
          },
          isRight: false
        }, // 选项

        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: ''// 试题标签

      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }], // 学科
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }], // 目录
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }], // 企业
        province: [{ required: true, message: '请选择城市', trigger: 'change' }], // 城市
        city: [{ required: true, message: '请选择城市', trigger: 'change' }], // 地区
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }], // 方向
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }], // 题型
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }], // 难度
        question: [{ required: true, message: '请输入题干', trigger: 'change' }], // 题干
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }] // 答案解析
      },
      imageUrl: '', // 照片路径
      subjectList: [], // 学科简单列表
      companyList: [], // 企业列表
      directoryList: [], // 目录列表
      tagsList: [], // 标签列表
      // 城市列表
      citySelect: {
        province: [],
        cityDate: []
      },
      detail: '', // 富文本内容
      Detail: '', // 题干富文本
      // 选中的城市
      // 选中的城市
      directionList: [], // 方向列表
      questionType: '1',

      difficulty: 1, // 难度
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      // 控制输入框状态
      A: true,
      B: true,
      C: true,
      D: true,
      // 添加多选
      addlist: [],
      // ASCII码值
      i: 69,
      radio: ''// 单选框的值
    }
  },
  watch: {
    // 监听路由
    $route (to) {
      // 监听器无法监听到第一次ID的值
      const ID = to.query.id
      if (ID) {
        // 就是修改试题
        this.reviseQuestions(ID)
      } else {
        // 新增试题  重置表单内容
        this.resetFormData()
      }
    }
  },
  created () {
    //  获取城市
    this.getProvince()
    // 获取方向
    this.getDirection()
  },
  methods: {
    change (val) {
      console.log(val)
    },
    // 获取学科简单列表
    async simple () {
      try {
        const { data } = await simple()
        this.subjectList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 修改试题
    async reviseQuestions (id) {
      const { data } = await detail({ id })
      this.formdata = data
    },
    // 重置表单内容
    resetFormData () {
      this.formdata = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: {
          code: {
            code1: '',
            code2: '',
            code3: '',
            code4: ''
          },
          title: {
            title1: '',
            title2: '',
            title3: '',
            title4: ''
          },
          isRight: false
        }, // 选项

        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: ''// 试题标签

      }
    },
    // 获取企业列表
    async List () {
      try {
        const { data } = await list()
        this.companyList = data.items
        console.log(this.companyList)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取目录列表
    async directorysList () {
      try {
        const { data } = await directorysList()
        this.directoryList = data.items
      } catch (error) {
        console.log(error)
      }
    },
    getDirection () {
      this.directionList = direction
      console.log(this.directionList)
    },
    getProvince () {
      this.citySelect.province = provinces()
      console.log(this.citySelect.province)
    },
    // 城市级联
    handleChange (e) {
      console.log(e)
      this.citySelect.cityDate = citys(e)
      this.city = ''
    },
    // 题型单选框
    changeType (value) {
      this.questionType = value
    },
    // 难度单选框
    changeDifficulty (value) {
      this.formdata.difficulty = value
    },

    // 标签获取
    async tagsSimple () {
      try {
        const { data } = await tagsSimple()
        this.tagsList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 点击确定提交表单
    async btnOK () {
      try {
        if (this.$route.query.id) {
          // 有id 就是修改数据
          const id = this.$route.query.id
          this.formdata.tags = this.formdata.tags.toString()
          this.formdata.options = [this.formdata.options]
          this.formdata.question = this.Detail
          this.formdata.answer = this.detail
          this.$refs.formList.validate()
          await update({ ...this.formdata, id: id })
          this.$message.success('修改成功')
        } else {
          this.formdata.tags = this.formdata.tags.toString()
          this.formdata.options = [this.formdata.options]
          this.formdata.question = this.Detail
          this.formdata.answer = this.detail
          this.$refs.formList.validate()
          await add(this.formdata)
          this.$message.success('添加成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 点击添加表单
    // 添加多选
    add () {
      const obj = {
        label: String.fromCharCode(this.i)
      }
      this.addlist.push(obj)
      this.i++
    },
    singleOption (value) {
      if (value === 'A') {
        this.A = false
        this.B = true
        this.C = true
        this.D = true
        this.formdata.options.isRight = true
      } else if (value === 'B') {
        this.B = false
        this.A = true
        this.C = true
        this.D = true
        this.formdata.options.isRight = true
      } else if (value === 'C') {
        this.C = false
        this.A = true
        this.B = true
        this.D = true
        this.formdata.options.isRight = true
      } else if (value === 'D') {
        this.D = false
        this.A = true
        this.B = true
        this.C = true
        this.formdata.options.isRight = true
      }
    }
  }
}
</script>

<style  lang='scss'>
.box-card {
  margin: 20px;
  // 上传文件样式

  .btn {
    width: 100px;
    height: 60px;
    position: relative;
    margin-left: 10px;
    border-style: dashed;
    margin-bottom: 10px;
  }
  .i {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    background: #fff;
    font-size: 18px;
    color: #999;
  }
}
</style>
